<template>
  <div>
    <div>
      <div>1. 拖拽上传</div>
      <br />
      <p>注意这里不要使用他本身的上传动作，需要实现自定义上传</p>
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :http-request="uploadFileImg"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将图片拖拽到此 或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">仅可以上传jpg/png 不能超过 500kb</div>
        </template>
      </el-upload>
    </div>

    <div>
      <div>2. 头像上传</div>
      <br />
      <p>注意这里不要使用他本身的上传动作，需要实现自定义上传</p>
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :http-request="uploadFileImg"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

import { uploadFile } from "@/api/uploadFile";

const imageUrl = ref(null);

const uploadFileImg = async ({ file }) => {
  const formData = new FormData();
  formData.append("file", file);
  // 上传图片走的自定义上传图片
  let res = await uploadFile(formData);
  console.log(res);
};
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>